{% extends "base.html" %}
{% block header_js %}
<script type="text/javascript">
$(document).ready(function() {
	//idc onchange
    $('#idc').change(function() {
      var idc = $(this).val();
      $.get("/monitor/get", {category:'product', idc:idc}, function(data) {
        $('#product').html(data);
      });
    });

    //product onchange
    $('#product').change(function() {
      var product = $(this).val();
      $.get("/monitor/get", {category:'host', product:product}, function(data) {
		$('#host').html(data);
      });
    });
});

function loadGroup(){
    var id = $('#group').val();
    if(id == '--') {
        alert("请选择报警组");
        return false;
    }
    $.get('/monitor/ajax_get_group', {"id": id}, function(data){
        $("#group_info").html(data);
    });
}

function loadStra(){
    var id = $('#stra').val();
    if(id == '--') {
        alert("请选择策略组");
        return false;
    }
    $.get('/monitor/ajax_get_stra', {"id": id}, function(data){
        $("#stra_info").html(data);
    });
}
</script>

{% endblock %}
<body>
{% block header %}
{% include "monitor-menu.html" %}
{% endblock %}

{% block content %}
<div class="wrap">
	<div class="wrap_right tree">
	{% autoescape off %}
	    {{ mtree }}
	{% endautoescape %}
	</div>
    <div class="wrap_left right">
        <div class="shenqing1">
        <h5 style="float:left;width:96%;margin-bottom:10px;">添加监控</h5>
		</div>
		<div class="caozuo_add">
			<form id="customForm" action="/monitor/edit/" method="post">
            <div class="box">
				<h2>监控</h2>
		        <div class="row">
		            <label for="name" class="">监控ID：</label>
					<input type="text" name="id"  value="{{ monitor.id }}" readonly="readonly" class="word_in" style="border:1px solid #7F9DB9;"/>
		        </div>
		        <div class="row">
		            <label for="name" class="">机房：</label>
		            <!--
		            <input type="text" name="idc"  value="{{host.idc.name}}" readonly="readonly" class="word_in" style="border:1px solid #7F9DB9;"/>
		            -->
		            <select name="idc" id="idc" class="sel_big">
		            <option value="{{host.idc.id}}">{{host.idc.name}}</option>
<!--                	<option >--</option>
					{% for i in idc %}
                      <option value={{ i.id }}>{{ i.name }}</option>
					{% endfor %}-->
                    </select>
                    
		        </div>
		        <div class="row">
		            <label for="name" class="">产品线：</label>
		            <!--
		            <input type="text" name="pid"  value="{{monitor.pid}}" readonly="readonly" class="word_in" style="border:1px solid #7F9DB9;"/>
		            -->
		            
		            <select name="pid" id="product" class="sel_big">
                	<option value="{{monitor.pid.id}}">{{monitor.pid}}</option>
                    </select>
                    
		        </div>
		        <div class="row">
		            <label for="name" class="">所属主机: </label>
		            <!--
		            <input type="text" name="pid"  value="{{monitor.hid}}" readonly="readonly" class="word_in" style="border:1px solid #7F9DB9;"/>
		            -->
		            
		            <select name="host" id="host" class="sel_big">
		            <option value="{{monitor.hid.id}}">{{monitor.hid}}</option>
                    </select>
                    <!--
                    <a href="/host/add"><img src="/static/img/add-icon.gif" alt="" /></a>
                    -->
		        </div>
				<div class="row">
		            <label for="name" class="">监控名称:</label>
					<input id="name" type="text" name="name" value="{{ monitor.name }}" class="word_in" style="border:1px solid #7F9DB9;"/>
	                <span id="nameInfo">请给监控起一个名字。</span>
		        </div>
				<div class="row">
		            <label for="name" class="">监控类型：</label>
		            {% for t in tpl %}
						{% ifequal t monitor.tpl %}
						{{ t }}&nbsp;<input name="tpl" type="radio" checked value="{{ t }}" />&nbsp;&nbsp;&nbsp;
						{% else%}
						{{ t }}&nbsp;<input name="tpl" type="radio" value="{{ t }}" />&nbsp;&nbsp;&nbsp;
						{% endifequal %}
					{% endfor %}
		        </div>
				<div class="row">
		            <label for="name" class="">监控频率: </label>
					<input id="freq" type="text" name="freq" value="{{ monitor.freq }}" class="word_in" style="border:1px solid #7F9DB9;"/>
	                <span id="freqInfo">请输入频率且大于60，例如：120</span>
		        </div>

		        <h2>策略绑定</h2>
		        <div class="row">
		            <label>策略组:</label>
					<select id="stra" name="stra" onChange="javascript:loadStra()" class="big_sel boxinput">
						<option value="{{ab.sid.id}}">{{ab.sid}}</option>
						<option >--</option>
		                {% for s in strategy %}
						<option value="{{s.id}}">{{s.name}}</option>
		                {% endfor %}
		            </select>
		            <a href="/strategy/add"><img src="/static/img/add-icon.gif" alt="" /></a>
		        </div>
		        <div id="stra_info" class="row"></div>
		        
		        <div class="row">
		            <label>报警组:</label>
			        <select id="group" name="group" onChange="javascript:loadGroup()" class="big_sel boxinput">
						<option value="{{ab.gid.id}}">{{ab.gid}}</option>
						<option >--</option>
		                {% for g in group %}
						<option value="{{g.id}}">{{g.name}}</option>
		                {% endfor %}
		            </select>
		            <a href="/group/add"><img src="/static/img/add-icon.gif" alt="" /></a>
		        </div>    
		        <div id="group_info" class="row"></div>
				<div class="row">
		            <label for="name" class="">监控URL：</label>
					<input id="url" type="text" name="url" value="{{ monitor.url }}" class="word_in" style="border:1px solid #7F9DB9;"/>
					<span id="urlInfo">请输入要监控的URL</span>
		        </div>
			</div>
		    <input type="submit" class="tijiao_big" value="&nbsp;&nbsp;提交" />
			</form>
		</div>
    </div>
</div>
</body>
</html>
{% endblock %}
